<!-- 数据页 -->
<template>
  <el-input placeholder="用户名" :suffix-icon="Search" v-model="searchName"></el-input>
  <el-input placeholder="电话" v-model="searchphone"></el-input>
  <el-input placeholder="地址" v-model="searchadress"></el-input>
  <el-button type="primary" @click="searchdata()">搜索</el-button>
  <el-button type="warning" @click="homedatares()">重置</el-button>

  <!-- 弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="用户数据" width="30%">
    <el-form label-width="140px">
      <el-form-item label="用户名">
        <el-input v-model="addobj.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="addobj.nickname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="addobj.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="addobj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="addobj.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="ditaddok()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
 <div class="homebtnjiqun" v-if="loginuser.isthree">
    <el-button type="primary" @click="ditadddata">新增
      <el-icon class="mar">
        <CirclePlus />
      </el-icon>
    </el-button>
    <el-button type="danger" @click="delalluserdata()">批量删除<el-icon class="mar">
        <CircleClose />
      </el-icon>
    </el-button>
    <el-button type="primary" @click="daochu()">导出<el-icon>
        <Bottom />
      </el-icon>
    </el-button>
  </div>
  <!-- 表格 -->
  <el-table :data="zstableData" height="72vh" style="width: 100%; margin-top:20px" @selection-change="ditallcheckbox">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" width="80" />
    <el-table-column prop="username" label="用户名" width="180" />
    <el-table-column prop="nickname" label="昵称" width="180" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="phone" label="电话" />
    <el-table-column prop="address" label="地址" />
    <el-table-column label="操作" v-if="loginuser.istwo">                     <!---->
      <template #default="scope">
        <el-button type="success" @click="editit(scope.row)">
          编辑
          <el-icon>
            <Edit />
          </el-icon>
        </el-button>
        <el-button type="danger" @click="deluserdit(scope.row)">
          删除
          <el-icon class="mar">
            <CircleClose />
          </el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页器 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="nowpage" v-model:page-size="pagesizehh" :small="small" :disabled="disabled"
      :background="background" layout="total, prev, pager, next" :total="datanum" @current-change="handleCurrentChange"  />
  </div>
</template>

<script lang="js" setup>
import {  adduserdata, deluserdata, delalldataofpeople, edituserdata,feny } from "@/api/homealldata.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted, computed } from "vue";
import { useRouter } from 'vue-router'
import { loguser } from "@/stores/loginuserdata.js";
const  router = useRouter()
//权限
const loginuser = loguser()
//页面展示数据
const zstableData = ref([])
//当前页码
const nowpage = ref(1)
//获取全体数据的长度，用于分页器总计
const datanum = ref(0)                                          //长都后端传，放入load中从新赋值
//重新获取页面所有数据函数s
const load = async () => {
  //刷新展示数据
  const res = await feny(nowpage.value,13,searchName.value.trim(), searchphone.value.trim(), searchadress.value.trim())
  zstableData.value = res.data.records
  //获取总数
  datanum.value = res.data.total
}
//提示函数封装
const isok = (res) => {
  if (res) {
    ElMessage({
      message: '成功',
      type: 'success',
    })
  } else {
    ElMessage({
      message: '失败',
      type: 'warning',
    })
  }
}

//获取所有数据获取测试
onMounted(async () => {
  //获取展示数据，默认第一页
  load()
})

//绑定输入框参数
const searchName = ref('')
const searchphone = ref('')
const searchadress = ref('')
//搜索按钮事件
const searchdata = async () => {
  load();
}
//重置按钮事件
const homedatares = () => {
  searchName.value = '',
    searchphone.value = '',
      searchadress.value = ''
  //页码返回1
  nowpage.value = 1
  //重新获取全部列表数据
  load();
}


let ditaddok = async () => { } //定义弹框二级确认事件通用于新增和修改 

//新增操作
const dialogFormVisible = ref(false);
const addobj = ref({}) //弹出框内默认值
const ditadddata = () => {
  dialogFormVisible.value = true
  addobj.value = {
    username: '',
    nickname: '',
    email: '',
    phone: '',
    address: ''
  }
  //对二级确认事件重新定义
  ditaddok = async () => {
    dialogFormVisible.value = false
    //通过网络接口把新添加的数据发送到后端,返回结果如果为true，就显示添加成功
    const res = await adduserdata(addobj.value.username, addobj.value.nickname, addobj.value.email, addobj.value.phone, addobj.value.address)//{jsonadduserobj,{user:iafa}
    isok(res)
    load();
  }
}


//编辑操作
const editit = async (row) => {
  dialogFormVisible.value = true
  //显示原始信息
  addobj.value = row
  //对二级确认事件重新定义
  ditaddok = async () => {
    dialogFormVisible.value = false
    //传入修改信息
    const res = await edituserdata(addobj.value.username, addobj.value.nickname, addobj.value.email, addobj.value.phone, addobj.value.address,addobj.value.id)
    load();
    isok(res)
  }
}


//批量删除操作
const deldataarr = ref([])
const ditallcheckbox = (val) => { //多选选中触发,获取选中行数据的id
  deldataarr.value = val.map((item) => { return item.id })
}
const delalluserdata = async () => {  //批量删除触发
  const res = await delalldataofpeople(deldataarr.value);
  isok(res)
  load();
}



//删除操作
const deluserdit = async (row) => {
  const res = await deluserdata(row.id);
  isok(res)
  load();
}

//导出
const daochu = async () => {
     window.open('http://127.0.0.1:9090/user/export')
     ElMessage({
      message: '导出成功，文件位置:桌面/用户列表.excl',
      type: 'success',
    })

}

//分液器

const currentPage4 = ref(1)
const pagesizehh = 13

const handleCurrentChange = async () => {
  load()
}

</script>

<style>
.el-input {
  width: 200px;
}

.homebtnjiqun {
  margin-top: 10px;
}

.mar {
  margin-left: 5px;
}
.demo-pagination-block{
  position: absolute;
  bottom: 20px;
}
</style>